<template>
  <div class="detail container-1200">
    <div class="title-wrap flex flex-jc-sp flex-ai-c">
      <div>
        <h1 class="mb-16 title">{{ detailInfo.title }}</h1>
        <p class="mb-16 site">
          <span class="cursor-p" @click="goList(1)">{{ detailInfo.region_name }}</span
          >> <span class="cursor-p" @click="goList(2)">{{ detailInfo.region_dis_name }}</span
          >> <span class="cursor-p" @click="goList(3)">{{ detailInfo.cate_name }}</span
          >>
          <span class="cursor-p" @click="goList(4)">{{ detailInfo.build_name }}</span>
        </p>
      </div>
      <div class="flex">
        <div class="btn cursor-p" style="color: #b9b9b9" @click="tapCollect(detailInfo.id, detailInfo.is_user_collect)">
          <i class="el-icon-star-on"></i>{{ detailInfo.is_user_collect === 1 ? '取消' : '关注' }}
        </div>
        <div class="btn cursor-p share" style="color: #b9b9b9" @click="toShare"><i class="el-icon-share"></i>分享</div>
      </div>
    </div>
    <div class="container">
      <div class="flex flex-jc-sp">
        <div class="banner mb-48">
          <div class="banner-mian">
            <img style="width: 100%; height: 100%" :src="mianImg" alt="" />
          </div>
          <div class="banner-list flex flex-jc-sp flex-ai-c">
            <div class="btn cursor-p left" @click="changeImg(-1)"></div>
            <div class="banner-container">
              <div style="white-space: nowrap">
                <!-- class="flex" -->
                <img
                  class="cursor-p banner-list-img"
                  :class="{ active: imgIndex === index }"
                  style="opacity: 0.6; width: 166px; height: 90px"
                  v-for="(item, index) in detailInfo.info_img_list"
                  :key="item"
                  :src="item"
                  alt=""
                  srcset=""
                  @click="tapImg(index)"
                />
                <!-- v-if="index < 4" -->
              </div>
            </div>
            <div class="btn cursor-p right" @click="changeImg(1)"></div>
          </div>
        </div>
        <div class="price-mian">
          <div class="flex unit-price border-b-1">
            <div style="margin-right: 12px">
              <span style="font-size: 44px; font-weight: bold; color: #ec203d">{{ detailInfo.price }}</span
              >元/月
            </div>
            <div style="transform: translateY(-5px)">
              单价：<span>{{ detailInfo.area_price }}</span> 元/m²月
            </div>
          </div>
          <div class="flex flex-jc-sp flex-ai-c area-info border-b-1">
            <div>
              <div class="parameter">{{ detailInfo.area }}m²</div>
              <div class="label">建筑面积</div>
            </div>
            <div>
              <div class="parameter">{{ detailInfo.work_num }}个工位</div>
              <div class="label">可容纳工位</div>
            </div>
            <div>
              <div class="parameter">{{ detailInfo.indec.name }}</div>
              <div class="label">装修程度</div>
            </div>
          </div>
          <div class="traffic-info border-b-1">
            <div class="flex mb-16 flex-ai-c">
              <img class="mr-8" src="~@/assets/images/icon-site.png" alt="" /><span class="mr-8" style="color: #0a68a2">{{ detailInfo.name }}</span>
              <span>{{ detailInfo.address }}</span>
            </div>
            <div class="flex mb-16 flex-ai-c">
              <img class="mr-8" src="~@/assets/images/icon-metro.png" alt="" /><span>{{ detailInfo.location_feature }}</span>
            </div>
            <div class="flex flex-ai-c">
              <img class="mr-8" src="~@/assets/images/icon-mansion.png" alt="" /><span style="color: #0a68a2; margin-top: 6px" @click="goTradingArea(detailInfo.build.id)">{{
                detailInfo.build_name
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="general-situation mb-48">
        <h3 class="detail-title">概况</h3>
        <div class="flex flex-jc-sp">
          <div class="general-situation-left">
            <div class="general-situation-item flex">
              <div class="label">可注册</div>
              <div class="text">{{ detailInfo.zhuce_str }}</div>
            </div>
            <!-- <div class="general-situation-item flex">
              <div class="label">最早可租</div>
              <div class="text">{{detailInfo.zhuce_str}}</div>
            </div> -->
            <div class="general-situation-item flex">
              <div class="label">装修情况</div>
              <div class="text">{{ detailInfo.indec.name }}</div>
            </div>
            <div class="general-situation-item flex">
              <div class="label">看房时间</div>
              <div class="text">{{ detailInfo.see_house_time }}</div>
            </div>
            <div class="general-situation-item flex">
              <div class="label">面积信息</div>
              <div class="text">{{ detailInfo.area }}</div>
            </div>
          </div>
          <div class="general-situation-right">
            <div class="general-situation-item flex">
              <div class="label">免租时间</div>
              <div class="text">{{ detailInfo.zu_time_str }}</div>
            </div>
            <div class="general-situation-item flex">
              <div class="label">最短租期</div>
              <div class="text">{{ detailInfo.min_time_str }}</div>
            </div>
            <!-- <div class="general-situation-item flex">
              <div class="label">价格优势</div>
              <div class="text">装修情况</div>
            </div> -->
            <div class="general-situation-item flex">
              <div class="label">所在楼层</div>
              <div class="text">{{ detailInfo.cengshu }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="feature mb-48">
        <h3 class="detail-title">房源特色</h3>
        <div class="feature-item flex border-b-1">
          <div class="label">周边配套</div>
          <div class="text">{{ detailInfo.peitao }}</div>
        </div>
        <div class="feature-item flex border-b-1">
          <div class="label">交通出行</div>
          <div class="text">{{ detailInfo.location_feature }}</div>
        </div>
        <div class="feature-item flex border-b-1">
          <div class="label">商务条款</div>
          <div class="text">{{ detailInfo.tiaokuan }}</div>
        </div>
      </div>
      <!-- <div class="real-pics">
        <h3 class="detail-title">实拍图片</h3>
        <div class="flex">
          <img
            style="
              width: 384px;
              height: 260px;
              margin-right: 12px;
              flex-wrap: wrap;
            "
            v-for="item in detailInfo.info_img_list"
            :key="item"
            :src="item"
            alt=""
            srcset=""
          />
        </div>
      </div> -->
      <div class="building-info">
        <h3 class="detail-title">所属楼盘</h3>
        <div class="flex flex-jc-sp">
          <div class="left">
            <div class="title" @click="goTradingArea(detailInfo.build.id)">
              {{ detailInfo.build.name }}
            </div>
            <div class="item mb-16 flex">
              <div class="item-left">价格</div>
              <div>{{ detailInfo.build.price }}</div>
            </div>
            <div class="item mb-16 flex">
              <div class="item-left">地址</div>
              <div>{{ detailInfo.build.address }}</div>
            </div>
            <div class="item mb-16 flex">
              <div class="item-left">地铁</div>
              <div>{{ detailInfo.build.station }}</div>
            </div>
            <div class="item mb-16 flex">
              <div class="item-left">人气</div>
              <div>{{ detailInfo.build.hot }}</div>
            </div>
            <div class="item mb-16 flex">
              <div class="item-left">在租</div>
              <div>{{ detailInfo.build.is_zu }}</div>
            </div>
            <div class="item mb-16 flex">
              <div class="item-left">层数</div>
              <div>{{ detailInfo.build.cengshu }}</div>
            </div>
            <div class="item mb-16 flex">
              <div class="item-left">客梯数</div>
              <div>{{ detailInfo.build.keti }}</div>
            </div>
            <div class="item mb-16 flex">
              <div class="item-left">标准层高</div>
              <div>{{ detailInfo.build.cenggao }}</div>
            </div>
            <div class="item mb-16 flex">
              <div class="item-left">建筑面积</div>
              <div>{{ detailInfo.build.area }}m²</div>
            </div>
            <div class="item mb-16 flex">
              <div class="item-left">物业公司</div>
              <div>{{ detailInfo.build.wuye }}</div>
            </div>
            <div class="item mb-16 flex">
              <div class="item-left">开发商</div>
              <div>{{ detailInfo.build.kaifas }}</div>
            </div>
            <div class="item mb-16 flex">
              <div class="item-left">入驻企业</div>
              <div>{{ detailInfo.build.qiye }}</div>
            </div>
          </div>
          <div class="flex flex-fd-c flex-jc-c flex-ai-c cursor-p border-rad">
            <img class="img" :src="detailInfo.build.thumb" alt="" srcset="" />
            <p style="font-size: 12px; color: #0a68a2" @click="goTradingArea(detailInfo.build.id)">
              {{ detailInfo.build.name }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="shareDialog" width="20%" center>
      <span>复制当前页面地址</span>
      <input v-show="false" type="text" id="success_form_input" readonly="readonly" v-model="link" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="shareDialog = false">取 消</el-button>
        <el-button class="copy" data-clipboard-action="copy" v-clipboard:error="onError" v-clipboard:copy="link" v-clipboard:success="onCopy" data-clipboard-target="#success_form_input"
          >复制</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getApiBaseHouseInfo, postApiHouseCollectHouse } from '@/api'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      user_id: null,
      id: null,
      detailInfo: {
        address: '1',
        area: 1,
        area_price: '1.00',
        build: {
          address: '南山粤海大道1号',
          area: '10000',
          cate_id: 1,
          cenggao: '4.2米',
          cengshu: '29',
          content: '',
          hot: '100',
          id: 1,
          is_top: 1,
          is_zu: '10',
          kaifas: '华润',
          keti: '10',
          name: '大冲商务中心',
          price: '10000.00',
          qiye: 'X',
          region_dis_id: 1,
          station: '1号线高新园站20米',
          thumb: '10',
          wuye: '保利物业',
          list: [
            {
              address: '南山区粤海大道00001号1号楼1楼',
              area: 1099,
              area_price: '2.00',
              build_id: 1,
              car: '100.00',
              cate_id: 1,
              cengshu: '20/50',
              content: '房屋特色',
              feature: ['1', '3', '4', '5', '6', '7'],
              id: 1,
              imgs: ['92', '93', '94', '95'],
              indec_id: 1,
              is_top: 2,
              location_feature: '进迪特qqq',
              min_time: -1,
              no: 'F0000000000001',
              peitao: '周边配套',
              price: '1999.00',
              region_dis_id: 2,
              region_id: 1,
              run: '100.00',
              sale_id: null,
              see_house_time: '随时可看',
              thumb: 'http://m.huangxh.top\\uploads\\admin\\article_thumb\\20201113\\a575826ac5ddf85f42e3fac4ebc067ea.jpeg',
              tiaokuan: '商务条款',
              title: '大冲商务中心1',
              work_num: '100~200',
              zhuce: 1,
              zu_time: -1
            }
          ],
          build_house_count: 5,
          build_id: 1,
          build_name: '大冲商务中心',
          car: '1.00',
          cate_id: 1,
          cengshu: '1',
          content: '房屋特色',
          feature: ['1'],
          id: 5,
          imgs: ['85', '86', '87', '88']
        },
        indec: { id: 1, name: '豪华装修' },
        indec_id: 1,
        info_img_list: [
          'http://m.huangxh.top\\uploadsadminarticle_thumb\\20210324d53d6d8c4797b7066f07e810f4674833.png',
          'http://m.huangxh.top\\uploadsadminarticle_thumb\\20210324e510f939e2c00e8ab34761a48ba36b18.png',
          'http://m.huangxh.top\\uploadsadminarticle_thumb\\20210324\\15505844269783c02fd442d621ed7e31.png',
          'http://m.huangxh.top\\uploadsadminarticle_thumb\\20210324\\782c734536f42a38dcc5f0fc2c431622.png'
        ],
        is_top: 1,
        is_user_collect: 0,
        location_feature: '进迪特2222',
        min_time: 1,
        min_time_str: '1月',
        no: '1',
        peitao: '周边配套',
        price: '1.00',
        region_dis_id: 1,
        region_dis_name: '高新园',
        region_id: 3,
        region_name: '南山区',
        run: '1.00',
        sale_id: null,
        see_house_time: '随时可看',
        thumb: '52',
        tiaokuan: '商务条款',
        title: '大冲',
        work_num: '1',
        zhuce: 0,
        zhuce_str: '否',
        zu_time: 1,
        zu_time_str: '1月'
      },
      imgIndex: 0,
      link: window.location.href,
      shareDialog: false
    }
  },
  computed: {
    mianImg() {
      return this.detailInfo.info_img_list[this.imgIndex]
    }
  },
  created() {
    const user_id = localStorage.getItem('id')
    if (!user_id) {
      this.$router.push('login')
    } else {
      this.user_id = user_id
    }
    const id = this.$route.params.id
    this.id = id
    if (id && user_id) {
      this.getHouseInfo()
    }
  },
  methods: {
    goList(num) {
      switch (num) {
        case 1:
          this.$router.push(`/search/${this.detailInfo.region_id}`)
          break
        case 2:
          this.$router.push(`/search/${this.detailInfo.region_id}/${this.detailInfo.region_dis_id}`)
          break
        case 3:
          this.$router.push(`/search/${this.detailInfo.region_id}/${this.detailInfo.region_dis_id}/${this.detailInfo.cate_id}`)
          break
        case 4:
          this.$router.push(`/search/${this.detailInfo.region_id}/${this.detailInfo.region_dis_id}/${this.detailInfo.cate_id}/${this.detailInfo.build_id}`)
          break
      }
    },
    tapImg(index) {
      this.imgIndex = index
    },
    changeImg(num) {
      const imgIndex = this.imgIndex + num
      if (imgIndex >= 0 && imgIndex <= 3) {
        this.imgIndex = imgIndex
      }
      return
    },
    getHouseInfo() {
      getApiBaseHouseInfo({ user_id: this.user_id, id: this.id }).then((res) => {
        if (res.code === 200) {
          this.detailInfo = res.data
        }
      })
    },
    tapCollect(house_id, status) {
      console.log('status: ', status)
      const user_id = localStorage.getItem('id')
      if (!user_id) {
        this.$router.push('/login')
        return
      }
      postApiHouseCollectHouse({
        house_id,
        user_id,
        status: status === 0 ? 1 : -1
      }).then((res) => {
        if (res.code === 200) {
          Message.success(res.msg)
          this.getHouseInfo()
        } else {
          Message.info('您已经收藏过了')
          this.getHouseInfo()
        }
      })
    },
    goTradingArea(id) {
      this.$router.push(`/home/tradingArea/${id}`)
    },
    /**
     * @description 分享
     * @param {}
     * @return {void}
     */
    toShare() {
      this.shareDialog = true
    },
    /**
     * @description 复制成功回调
     * @param {e} object
     * @return {void}
     */
    onCopy(e) {
      Message({
        message: '复制成功！',
        type: 'success',
        duration: 2000
      })
    },
    /**
     * @description 复制失败回调
     * @param {e} object
     * @return {void}
     */
    onError(e) {
      Message({
        message: '复制失败！',
        type: 'error',
        duration: 2000
      })
    }
  }
}
</script>

<style lang="less" scoped>
.detail {
  padding-top: 36px;
  .title-wrap {
    .title {
      font-size: 30px;
      font-weight: bold;
      color: #333333;
    }
    .site {
      font-size: 12px;
      color: #999999;
    }
    .btn {
      width: 78px;
      height: 34px;
      border: 1px solid #f2f2f2;
      border-radius: 3px;
      color: rgba(0, 0, 0, 0.87);
      text-align: center;
      line-height: 34px;
      margin-left: 6px;
    }
  }
  .container {
    .building-info {
      margin-bottom: 48px;
      .left {
        .title {
          cursor: pointer;
          font-size: 16px;
          font-weight: bold;
          color: #0a68a2;
          margin-bottom: 24px;
        }
        .item {
          font-size: 14px;
          color: #333333;
          .item-left {
            width: 64px;
            margin-right: 38px;
          }
        }
      }
      .img {
        width: 246px;
        height: 165px;
        border-radius: 3px;
        margin-bottom: 10px;
      }
    }
    .feature {
      .feature-item {
        padding: 24px 0;
        .label {
          font-size: 14px;
          color: #333;
          margin-right: 24px;
        }
        .text {
          font-size: 14px;
          color: #333;
        }
      }
    }
    .general-situation {
      .general-situation-right,
      .general-situation-left {
        width: 40%;
      }
      .general-situation-item {
        .label {
          width: 60px;
          font-size: 14px;
          color: #959faa;
          text-align: justify;
          margin-right: 24px;
          &::after {
            display: inline-block;
            width: 100%;
            content: '';
            height: 0;
          }
        }
        .text {
          font-size: 14px;
          font-weight: 400;
          color: #000000;
        }
      }
    }
    .detail-title {
      font-size: 22px;
      font-weight: bold;
      color: #333333;
      margin-bottom: 24px;
    }
    .border-b-1 {
      border-bottom: 1px solid #e5e5e5;
    }
    .banner {
      .banner-mian {
        width: 762px;
        height: 410px;
        border-radius: 10px;
        overflow: hidden;
        background-color: gainsboro;
        margin-bottom: 12px;
        img {
          width: 100%;
        }
      }
      .banner-list {
        .banner-container {
          width: 690px;
          overflow-x: scroll;
          flex-wrap: nowrap;
          &::-webkit-scrollbar {
            overflow-x: scroll;
            display: none;
          }
        }
        .banner-list-img {
          margin: 0 4px;
          &.active {
            opacity: 1 !important;
          }
        }
        .btn {
          width: 35px;
          height: 94px;
          background: #333333;
          border-radius: 5px;
          background-position: center;
          background-repeat: no-repeat;
          &.left {
            background-image: url(~@/assets/images/icon-banner-left.png);
          }
          &.right {
            background-image: url(~@/assets/images/icon-banner-right.png);
          }
        }
      }
    }
    .price-mian {
      width: 400px;

      .traffic-info {
        padding: 32px 0;
      }
      .area-info {
        padding: 32px 0;
        .parameter {
          font-size: 22px;
          font-weight: bold;
          color: #333333;
          margin-bottom: 8px;
        }
        .label {
          font-size: 12px;
          color: #979fa8;
        }
      }
      .unit-price {
        font-size: 12px;
        color: #666666;
        align-items: flex-end;
        line-height: 1;
        padding: 32px 0;
      }
    }
  }
  .mb-16 {
    margin-bottom: 16px;
  }
  .mb-12 {
    margin-bottom: 12px;
  }
  .mb-48 {
    margin-bottom: 48px;
  }
  .mr-8 {
    margin-right: 8px;
  }
}
</style>
